<script setup lang="ts">
import {reactive, onMounted, nextTick, ref} from 'vue';
import {deleteBannerList, deleteTagList, getTagList, postBannerList, postTagList} from '/@/api/api'
import {ElMessage} from 'element-plus';
const avueFormRes = ref()
const data = reactive({
  title:'Add',
  dialogShow: false,
  tabIndex: 0,
  dataList: [],
  page: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
  },
  option: {
    searchLabelWidth: 50,
    addBtn: false,
    printBtn: false,
    excelBtn: false,
    // searchSpan: 5,
    searchMenuSpan: 4,
    border: true,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    align: 'center',
    column: [
      {
        label: 'Creation time',
        prop: 'createTime',
      },
      {
        label: 'Sort',
        prop: 'sort',
      },
      {
        label: 'Label Name',
        prop: 'labelName',
      },
    ]
  },
  optionForm: {
    submitText:'Submit',
    emptyText	:'Empty',
    column: [
      {
        label: 'Sort',
        span: 24,
        prop: 'sort',
        type: 'number',
        rules: [
          {
            required: true,
            message: "Please enter the order",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'Label name',
        span: 24,
        prop: 'labelName',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter a name for the label",
            trigger: "blur"
          }
        ]
      }
    ]
  },
  form: {},
  curriculumForm:{
    courseName:'',
    loading:false,
    options:[],
    item:{}
  }
})

onMounted(() => {

})
//获取轮播图列表
const bannerList = () => {
  let page = {
    pageIndex: data.page.currentPage,
    pageSize: data.page.pageSize
  }
  getTagList(page).then((res: any) => {
    console.log(res)
    if (res.code === 200) {
      data.dataList = res.data.list
      data.page.total = res.data.total
    }

  })
}

const addCarousel = () => {
  // handleReset()
  data.curriculumForm.item = {}
  data.title = 'Add to'
  data.dialogShow = true
  nextTick(()=>{
    avueFormRes.value.resetForm()
  })
}
const onLoad = (e:any) => {
  console.log(e)
  data.page.currentPage = e.currentPage
  data.page.pageSize = e.pageSize
  bannerList()
}
const refreshChange = () => {
  bannerList()
}
const handleReset = (form:any, done:any) => {



}
const deleteCarousel = (row:any) => {
  deleteTagList({labelId:row.labelId}).then((res: any) => {
    bannerList()
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: 'The deletion is successful',
        type: 'success',
      })
    }
  })
}
const handleSubmit = (form: object, done: any) => {
  postTagList(form).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: 'The addition was successful',
        type: 'success',
      })
    }
    data.dialogShow = false
    bannerList()
    done()

  })
}
const editCarousel = (row:any) => {

}
</script>

<template>
  <div class="layout-pd">
    <div class="carousel-box">
      <avue-crud v-model:page="data.page" :data="data.dataList" :option="data.option" @on-load="onLoad" @refresh-change="refreshChange">
        <template #menu-left="{}">
          <el-button type="success" @click="addCarousel">New</el-button>
        </template>
        <template #menu="{row}">
<!--          <el-button text type="primary" @click="editCarousel(row)">Edit</el-button>-->
          <el-button text type="primary" @click="deleteCarousel(row)">Delete</el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog
        v-model="data.dialogShow"
        :title="data.title"
        width="50%"
    >
      <avue-form ref="avueFormRes" :option="data.optionForm" v-model="data.form" @submit="handleSubmit"  @reset-change="handleReset"></avue-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.carousel-box {
  width: 100%;
  box-sizing: border-box;
  background: var(--el-color-white);
  padding: 20px;
}

.item-img {
  width: 100%;

  img {
    width: 50%;
  }
}

::v-deep .avue-form__row {
  margin-bottom: 20px;
}
::v-deep .el-select {
  width: 100% !important;
}
</style>